<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import HomePage from './HomePage.vue';
import CreatePage from './CreatePage.vue';
import RankPage from './RankPage.vue';
import MyPage from './MyPage.vue';
import StoryDetailPage from './StoryDetailPage.vue';

const route = useRoute();
const currentPage = computed(() => {
  const path = route.path;
  if (path.startsWith('/story/')) {
    return StoryDetailPage;
  }
  switch (path) {
    case '/create':
      return CreatePage;
    case '/rank':
      return RankPage;
    case '/favorite':
      return MyPage;
    default:
      return HomePage;
  }
});

import { useRouter } from 'vue-router';

const router = useRouter();
const changePage = (path: string) => {
  router.push(`/${path}`);
};
</script>

<template>
  <div class="container mx-auto px-4 py-8 pb-24">
    <!-- 主要内容区域 -->
    <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-lg overflow-hidden">
      <component :is="currentPage" />
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-lg border-t border-gray-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
      <div class="flex justify-around items-center p-4 max-w-3xl mx-auto">
        <div class="flex flex-col items-center" :class="route.path === '/' || route.path === '/home' ? 'text-purple-600' : 'text-gray-600'" @click="changePage('home')">
          <img src="../assets/house.svg" class="w-6 h-6" alt="首页">
          <span class="text-xs mt-1">首页</span>
        </div>
        <div class="flex flex-col items-center" :class="route.path === '/create' ? 'text-purple-600' : 'text-gray-600'" @click="changePage('create')">
          <img src="../assets/camera.svg" class="w-6 h-6" alt="创作">
          <span class="text-xs mt-1">创作</span>
        </div>
        <div class="flex flex-col items-center" :class="route.path === '/rank' ? 'text-purple-600' : 'text-gray-600'" @click="changePage('rank')">
          <img src="../assets/trophy.svg" class="w-6 h-6" alt="排行">
          <span class="text-xs mt-1">排行</span>
        </div>
        <div class="flex flex-col items-center" :class="route.path === '/favorite' ? 'text-purple-600' : 'text-gray-600'" @click="changePage('favorite')">
          <img src="../assets/user.svg" class="w-6 h-6" alt="我的">
          <span class="text-xs mt-1">我的</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  min-height: 100vh;
}
</style>